import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button,FlatList} from 'react-native';

const StylesProps = [
'alignContent',
'alignItems',
'alignSelf',
'aspectRatio',
'backfaceVisibility',
'backgroundColor',
'borderBottomColor',
'borderBottomEndRadius',
'borderBottomLeftRadius',
'borderBottomRightRadius',
'borderBottomStartRadius',
'borderBottomWidth',
'borderColor',
'borderEndColor',
'borderEndWidth',
'borderLeftColor',
'borderLeftWidth',
'borderRadius',
'borderRightColor',
'borderRightWidth',
'borderStartColor',
'borderStartWidth',
'borderStyle',
'borderTopColor',
'borderTopEndRadius',
'borderTopLeftRadius',
'borderTopRightRadius',
'borderTopStartRadius',
'borderTopWidth',
'borderWidth',
'bottom',
'color',
'decomposedMatrix',
'direction',
'display',
'elevation',
'end',
'flex',
'flexBasis',
'flexDirection',
'flexGrow',
'flexShrink',
'flexWrap',
'fontFamily',
'fontSize',
'fontStyle',
'fontVariant',
'fontWeight',
'height',
'includeFontPadding',
'justifyContent',
'left',
'letterSpacing',
'lineHeight',
'margin',
'marginBottom',
'marginEnd',
'marginHorizontal',
'marginLeft',
'marginRight',
'marginStart',
'marginTop',
'marginVertical',
'maxHeight',
'maxWidth',
'minHeight',
'minWidth',
'opacity',
'overflow',
'overlayColor',
'padding',
'paddingBottom',
'paddingEnd',
'paddingHorizontal',
'paddingLeft',
'paddingRight',
'paddingStart',
'paddingTop',
'paddingVertical',
'position',
'resizeMode',
'right',
'rotation',
'scaleX',
'scaleY',
'shadowColor',
'shadowOffset',
'shadowOpacity',
'shadowRadius',
'start',
'textAlign',
'textAlignVertical',
'textDecorationColor',
'textDecorationLine',
'textDecorationStyle',
'textShadowColor',
'textShadowOffset',
'textShadowRadius',
'textTransform',
'tintColor',
'top',
'transform',
'transformMatrix',
'translateX',
'translateY',
'width',
'writingDirection',
'zIndex'
];

export default class FlatListDemo extends Component{
    _renderItem(data) {
        return (
            <View style = {styles.item}>
                <Text style = {styles.text}>
                    {data.item}
                </Text>
            </View>
        );
    }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
            data = {StylesProps}
            renderItem = {(data) => this._renderItem(data)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#163',
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 10,
    justifyContent: 'center',
    paddingLeft: 20,
    height: 50,
  },
  text: {
    color: 'white',
    fontSize: 20,
  }
});